{% extends "model.html" %}
{% block content %}
    <div class="panel panel-default">
        <div class="panel-heading">图表</div>
        <div class="panel-body">
            <div class="col-lg-6">
                <div id="pillar" style="width: 600px;height:400px;"></div>
                <script type="text/javascript">
                    $(function () {
                        pillar()
                    })

                    function pillar() {
                        var myChart = echarts.init(document.getElementById('pillar'));

                        // 指定图表的配置项和数据
                        var option = {
                            title: {
                                text: '成绩分布情况'
                            },
                            tooltip: {},
                            legend: {
                                data: ['成绩']
                            },
                            xAxis: {
                                data: ['<200', '>200但<300', '>300',]
                            },
                            yAxis: {},
                            series: [
                                {
                                    name: '成绩',
                                    type: 'bar',
                                    data: []
                                }
                            ]
                        };
                        $.ajax({
                            url: "/chart/pillar",
                            type: "get",
                            datatype: "json",
                            success: function (res) {
                                option.series[0].data = res.data
                                // 使用刚指定的配置项和数据显示图表。
                                myChart.setOption(option);
                            }
                        })
                    }

                    // 基于准备好的dom，初始化echarts实例
                </script>
            </div>
        </div>
    </div>
{% endblock %}